<template>
  <van-swipe-cell v-for="(item, index) in todoList" :key="index">
    <template #left>
      <van-button
        square
        type="primary"
        @click="completeTodo(index)"
        text="完成"
      />
    </template>

    <div
      class="swipeCenter"
      :style="{ background: item.isComplete ? 'green' : '' }"
    >
      <div class="iconCir" :style="{ background: item.color }">
        <i :class="item.icon"></i>
      </div>
      <p class="info">{{ item.text }}</p>
    </div>

    <template #right>
      <van-button square type="danger" @click="delTodo(index)" text="删除" />
    </template>
  </van-swipe-cell>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
import { useStore } from "vuex";

export default defineComponent({
  name: "myTodo",
  setup() {
    const store = useStore();
    const state = reactive({
      todoList: store.state.todoList
    });

    function completeTodo(idx: number) {
      state.todoList[idx].isComplete = true;
      store.commit("setTodo", state.todoList);
    }

    function delTodo(idx: number) {
      state.todoList.splice(idx, 1);
      console.log(state.todoList, idx);
      store.commit("setTodo", state.todoList);
    }

    return {
      ...toRefs(state),
      completeTodo,
      delTodo
    };
  }
});
</script>

<style lang="scss" scoped>
.swipeCenter {
  box-sizing: border-box;
  padding-left: 10px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background: #ffffff;
  height: 42px;
  .iconCir {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid red;
    display: flex;
    justify-content: center;
    align-items: center;
    i {
      font-size: 28px;
    }
  }

  .info {
    margin-left: 10px;
  }
}
</style>
